<script setup lang="ts" name="Attr">
import CategoryList from '@/components/CategoryList.vue';
import { ref } from 'vue';
import { reqGetAttrInfoList, reqDeleteAttrInfo } from '@/api/product/attr.ts';
import type { Category, AttrInfo } from '@/api/product/type.ts';
import MyQTable from '@/components/MyQTable.vue';
import type { QTableColumn } from 'quasar';
import { useQuasar } from 'quasar';
import FormCard from './components/FormCard.vue';
import { useCompRef } from '@/utils/useCompRef.ts';
import { useRemoveItem } from '@/hooks/useRemoveItem.ts';

//
const $q = useQuasar();
// 属性列表
const attrInfoList = ref<AttrInfo[]>([]);
const categoryId = ref<Category>();
// 获取平台属性
async function getAttrInfoList(params?: Category) {
  if (!params) {
    attrInfoList.value = [];
    return;
  }
  try {
    categoryId.value = { ...params };
    const res = await reqGetAttrInfoList(params);
    if (res.code === 200) {
      attrInfoList.value = res.data;
    }
  } catch (error) {
    $q.notify({
      type: 'negative',
      message: '获取平台属性失败',
      position: 'top'
    });
  }
}
// 属性表格列
const columns: QTableColumn[] = [
  {
    name: 'index',
    label: '序号',
    field: '',
    align: 'center',
    style: 'width: 80px'
  },
  { name: 'attrName', label: '属性名称', field: 'attrName', align: 'left' },
  { name: 'attrValueList', label: '属性值名称', field: '', align: 'left' },
  { name: 'control', label: '操作', field: 'id', align: 'left' }
];
// 表单面板切换
const formCard = useCompRef(FormCard);
const formCardVisible = ref<boolean>(false);
function toggleFormCardVisible(attrInfo: AttrInfo | number) {
  formCardVisible.value = !formCardVisible.value;
  formCard.value!.showCard(attrInfo);
}
// 传给formCard组件的回调 隐藏表单
async function hideFormCard(flag: string) {
  if (flag) {
    // 有参数代表添加或修改成功 更新数据
    getAttrInfoList(categoryId.value);
  }
  formCardVisible.value = false;
}
// 删除指定属性
function delAttrInfo(id: number) {
  useRemoveItem(
    reqDeleteAttrInfo,
    id,
    '确认删除该属性吗？',
    getAttrInfoList,
    categoryId.value
  );
}
</script>

<template>
  <div>
    <CategoryList @getCategory="getAttrInfoList" :readonly="formCardVisible" />
    <!-- 表格展示属性数据 -->
    <q-card class="q-mt-md" v-show="!formCardVisible">
      <q-card-section>
        <authority permission="btn.Attr.add" #="{ hasPermission }">
          <q-btn
            label="添加平台属性"
            icon="add"
            color="primary"
            :disable="!attrInfoList.length || !hasPermission"
            @click="toggleFormCardVisible(categoryId?.category3Id!)"
          ></q-btn>
        </authority>
      </q-card-section>
      <q-card-section>
        <my-q-table :data="attrInfoList" :columns="columns">
          <template #body-cell-attrValueList="{ row }">
            <q-td>
              <q-chip
                color="teal"
                text-color="white"
                dense
                v-for="item in row.attrValueList"
                :key="item.id"
              >
                {{ item.valueName }}
              </q-chip>
            </q-td>
          </template>
          <template #body-cell-control="{ row }">
            <q-td key="control" style="width: 160px">
              <authority permission="btn.Attr.update" #="{ hasPermission }">
                <hint-button
                  title="修改属性"
                  size="xs"
                  icon="edit"
                  color="warning"
                  class="q-mr-xs"
                  @click="toggleFormCardVisible(row)"
                ></hint-button>
              </authority>
              <authority permission="btn.Attr.remove" #="{ hasPermission }">
                <hint-button
                  title="删除属性"
                  size="xs"
                  icon="delete"
                  color="negative"
                  @click="delAttrInfo(row.id)"
                ></hint-button>
              </authority>
            </q-td>
          </template>
        </my-q-table>
      </q-card-section>
    </q-card>
    <!-- 表单数据面板 -->
    <FormCard
      ref="formCard"
      @hideFormCard="hideFormCard"
      v-show="formCardVisible"
    />
  </div>
</template>

<style scoped>
/* code... */
</style>
